<template>
	<view class="form">
		<text class="form-text">更改密码</text>
		<uni-forms ref="valiFormData" :modelValue="valiFormData" :rules="rules" label-align="center" label-width="160rpx">
			<uni-forms-item label="账号" name="账号" >
				<uni-easyinput v-model="valiFormData.账号" placeholder="请输入账号"  />
			</uni-forms-item>
			<uni-forms-item label="原密码" name="原密码" required>
				<uni-easyinput type="password" v-model="valiFormData.原密码" placeholder="请输入密码"  />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="新密码" required>
				<uni-easyinput type="password" v-model="valiFormData.新密码" placeholder="请输入密码"  />
			</uni-forms-item>
			<uni-forms-item label="密码确认" name="新密码确认" required>
				<uni-easyinput type="password" v-model="valiFormData.新密码确认" placeholder="请输入密码"  />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="loginBtnClick('valiFormData')">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				valiFormData: {
					账号: '',
					原密码: '',
					新密码: '',
					新密码确认: '',
				},
				rules: {
					// 对name字段进行必填验证
					账号: {
						rules: [{
								required: true,
								errorMessage: '请输入账号',
							}
						]
					},
					// 对email字段进行必填验证
					原密码: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							}
						]
					},
					新密码: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							}
						]
					},
					新密码确认: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
								validateFunction:function(rule,value,data,callback){
															console.log('value',value)
															console.log('date',data)
															if (value===data.新密码){																
																return true
															}else{
																callback('密码不一致')
																return false
															}
															
														}
							}
						]
					},
				}
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				//.log(option); //打印出上个页面传递的参数
				// console.log(option)	
				const that =this
				//设置导航栏标题内容
				uni.setNavigationBarTitle({
					title: option.name
				});
				//获取用户名
				uni.getStorage({
					key: 'userinfo',
					success: function (res) {
						var userinfo=JSON.parse(res.data)
						that.valiFormData.账号=userinfo[0].账号
					},
				});
				
		},
		methods:{
			loginBtnClick(ref){
				// console.log('valiFormData',this.valiFormData)
				
				//进行校验数据this.$refs[ref] 标识找到表单元素
				this.$refs[ref].validate().then(res => {
					//res 返回的是表单元素的值，不包括列表等
					// console.log('loginsuccess', res);
					uni.showToast({
						title:"数据上传中..."
					})
					// console.log('login', getApp().globalData.baseUrl);
					//上传数据 包装数量要另外增加
					uni.request({
						url:getApp().globalData.baseUrl+"/auth/pwdchange",
						data:{	
							name:res.账号,
							oldpwd:res.原密码,
							newpwd:res.新密码,
						},
						success: (res) => {
								console.log(res)
								// console.log(res.data.bool)
								//返回的数据是成功还是失败
								if (res.data.bool){
									//写入缓存中									
									uni.setStorage({
										key: 'userinfo',
										data: JSON.stringify(res.data.data),
										success: function () {
											uni.hideLoading();
											getApp().globalData.name=res.data.data.账号
											uni.showToast({
																title: "修改成功",
																icon: 'none'
															});
											uni.switchTab({
												url: '/pages/tabBar/index/index'
											});	
										},
										
									});
															
								}else{
									
									uni.hideLoading();
									uni.showToast({
														title: "修改失败,账户或密码不对",
														icon: 'none'
													})
								}
																							
								
							},
						fail: (res) => {
								
								uni.hideLoading();
								uni.showToast({
													title: "修改失败,服务器未开启",
													icon: 'none'
												})
								
							},
						})
					
				}).catch(err => {
					//异常时显示错误
					// console.log('err', err);
					
				})	
					
					
								
			},
		},
				
	}
</script>

<style lang="scss">
.form{
	
	padding: 50rpx;
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.form-text{
		margin-top: 30rpx;
		padding: 50rpx;
		text-align: center;
		font-size: 50rpx;
		
	}
}
</style>

